<template>
    <div >
        <!--        添加功能-->
        <el-dialog
                title="提示"
                :visible.sync="add"
                width="30%"
                style="padding: 10px 5px"
        >
            <el-form :model="addform" label-width="80px" :rules="rules" ref="addform">

                <el-form-item label="角色名称" prop="roleName">
                    <el-input v-model="addform.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="addform.roleDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="add = false">取 消</el-button>
                <el-button type="primary" @click="addRole">确 定</el-button>
            </span>
        </el-dialog>


        <!--        修改信息-->
        <el-dialog
                title="提示"
                :visible.sync="updd"
                width="30%"
                style="padding: 30px 20px"
        >
            <el-form :model="updform" label-width="80px" :rules="rules" ref="updform">
                <el-form-item label="用户编号" prop="id">
                    <el-input  disabled v-model="updform.roleid"></el-input>
                </el-form-item>
                <el-form-item label="角色名字" prop="roleName">
                    <el-input v-model="updform.roleName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="roleDesc">
                    <el-input v-model="updform.roleDesc"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="updd = false">取 消</el-button>
                <el-button type="primary" @click="updRole">确 定</el-button>
            </span>
        </el-dialog>



        <el-form :inline="true" :model="RoleSearch" class="demo-form-inline">
            <el-form-item label="角色名称">
                <el-input v-model="RoleSearch.roleName" placeholder="角色名称"></el-input>
            </el-form-item>
            <!--<el-form-item label="创建时间">
                <el-date-picker
                        v-model="RoleSearch.startDate"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
                <el-date-picker
                        v-model="RoleSearch.endDate"
                        type="date"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>-->
            <el-form-item>
                <el-button type="primary" @click="onSearch">查询</el-button>
                <el-button type="primary" @click="clearSearch">清空查询</el-button>
            </el-form-item>
        </el-form>
        <el-button  @click="inserClick"  type="primary" >添加</el-button>
        <template>
            <el-table
                    :data="RoleForm"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="roleid"
                        label="角色编号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="roleName"
                        label="角色名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="roleDesc"
                        label="角色描述"
                        width="180">
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                >
                    <template slot-scope="scope">
                        <el-button @click="updateRole(scope.row)"  type="success" size="small">编辑</el-button>
                        <el-button @click="deleClick(scope.row.roleid)"  type="primary" size="small">删除</el-button>
                        <el-button @click="handleClick(scope.row)" type="danger" size="small">修改权限</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </template>

        <!--<%&#45;&#45;分页组件
        size-change:页面显示条数改变时触发的事件
        current-change: 页面改变时触发的事件
        current-page:当前的页面
        page-sizes:接受一个整数数组  数组元素为展示的选择每页显示个数的选项
        page-size:每页显示的条数
        total:总条数
        &#45;&#45;%>-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>


        <!--分配权限的弹出层-->
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <el-tree
                    :data="treeData"
                    show-checkbox
                    node-key="id"
                    ref="tree"
                    :default-checked-keys="[5]"
                    :props="defaultProps">
            </el-tree>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmFen()">确 定</el-button>
  </span>
        </el-dialog>
    </div>

</template>


<script>

    export default {
        name: "Home",
        data(){
            return{
                RoleSearch:{
                    roleName: "",
                },
                RoleForm:[],

                dialogVisible:false,
                treeData:[],
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                roleId:"",

                //控制添加弹出层
                add: false,
                addform:{},
                //被选中的角色id
                roleid:0,
                roleids :0,
                //正则校验
                rules: {
                    roleName: [
                        {required: true, message: '请输入角色名称', trigger: 'blur'},
                        {min: 2, max: 10, message: '长度在 5 到 10 个字符', trigger: 'blur'}
                    ]
                },
                //角色修改
                updd:false,
                updform:{},

                //权限修改
                updateAuthorityDialogVisible:false,
                //选中的菜单
                checkKeys:[],
                //权限树形内容
                data: [],
                currentPage:1,
                //接受一个整数数组  数组元素为展示的选择每页显示个数的选项
                pageSizes:[5,10,15,20],
                //每页显示的条数
                pageSize:5,
                //总条数
                total:0,
            }
        },
        created() {
            this.initRoleTable()
        },
        methods:{
            confirmFen(){
                //获取全选半选树
                var checkedNodes = this.$refs.tree.getCheckedNodes(false,true);
                /*console.log(checkedNodes);*/
                var ids=[];
                checkedNodes.forEach(item=>{
                    ids.push(item.id);
                })
                console.log(ids);
                this.$http.post("/permission/role-permission/fen?roleid="+this.roleId,ids).then(result=>{
                    if (result.data.code===2000){
                        this.dialogVisible=false;
                        this.$message.success("分配权限成功");
                        this.$router.go(0)
                    }
                })
            },
            handleClick(row){
                this.dialogVisible=true;
                this.roleId=row.roleid;
                console.log(row.roleid)
                this.$http.get("/permission/permission/findPermissionByRoleId?roleId="+row.roleid).then(result=>{
                    this.treeData=result.data.data.treeData;
                    console.log(result.data.data.checkIds)
                    setTimeout(() => {
                        result.data.data.checkIds.forEach(value => {
                            this.$refs.tree.setChecked(value, true, false);
                        })
                    },100)
                })
            },
            initRoleTable(){
                this.$http.post("/role/findRole?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.RoleSearch).then(result=>{
                    console.log(result)
                    this.RoleForm = result.data.data.records
                    this.total = result.data.data.total
                })
            },
            //每页显示的条数大小改变时触发的方法
            handleSizeChange(val) {
                this.pageSize=val;
                this.initRoleTable();
            },
            //页码改变时触发的方法
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initRoleTable();
            },
            onSearch(){
                this.currentPage = 1;
                this.initRoleTable();
            },
            //清空搜索按钮事件
            clearSearch(){
                this.RoleSearch  = {};
                this.initRoleTable();
            },
            deleClick(row){
                console.log(row)
                this.$http.post("/role/delete?roleid="+row).then(result=>{
                    this.initRoleTable()
                    console.log(result)

                })
            },
            inserClick(){
                this.add = true;
            },
            addRole(){
                this.$refs['addform'].validate((valid) => {
                    if (valid){
                        this.$http.post("/role/insert",this.addform).then(result=>{
                            console.log(result);
                            this.initRoleTable()
                            this.add = false;
                        })
                    }
                })

            },
            updateRole(row){
                console.log(row);
                this.updd = true;
                this.updform = row;
                console.log(this.updform)
            },
            updRole(){
                console.log(this.updform)
                this.$http.post("/role/update",this.updform).then(result=>{
                    console.log(result);
                    if (result.data.code==2000){
                        this.updd = false;
                        this.updform = {}
                        this.$message.success(result.data.msg);
                        this.initRoleTable()
                    }
                })
            }
        }

    }
</script>

<style scoped>

</style>